<template>
  <div class="meal">
      <div class="meal-list" v-for="(v,i) in arrlist" :key="i">
          <div class="meal-pic">
              <img :src="v.imgurl" alt="">
          </div>
          <div class="meal-info">
              <p class="meal-title"><span class="meal-food">霸王餐</span>{{v.title | xcc}}</p>
              <ul>
                  <li v-for="(v,i) in v.head" :key="i"> <img :src="v.img" alt=""></li>
              </ul>
              <p class="meal-num">限量<span>{{v.limit}}</span></p>
              <div class="price">
                <span class="good-price">￥<span class="meal-price">{{v.price}}</span></span>
                <span class="good-nuit">{{v.nuit}}</span>
              </div>
              <div class="sign-up">
                  立刻报名
              </div>
          </div>
      </div>

  </div>
</template>

<script>
export default {
    name:"meal-list",
    props:["arrlist"],
    filters:{
        xcc(val){
            if(val.length>24){
                return val.substr(0,24)+"..."
            }else{
                return val
            }
        }
        
    }
}
</script>

<style scoped>
    .meal{
        padding: 0 .13rem;
    }
    .meal-list{
        width: 100%;
        height: 1.67rem;
        background-color: white;
        border-radius: .08rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: .18rem;
    }
    .meal-pic{
        padding: .13rem;
        width: 40%;
    }
    .meal-pic>img{
        width: 100%;
        height: 100%;
        background-color: #f8f8f8;
    }
    .meal-info{
        width: 55%;
        margin-top: .16rem;
        position: relative;
        margin-right: .13rem;
    }
    .meal-title{
        font-size: .15rem;
        height: .4rem;
    }
    .meal-info  .meal-food{
        font-size: .12rem;
        display: inline-block;
        width: .45rem;
        height: .18rem;
        background-color: black;
        color: #e6c48c;
        text-align: center;
        line-height: .18rem;
        border-radius: .04rem;
        margin-right: .05rem;
    }
    .meal-info ul{
        display: flex;
        margin-top: .15rem;
    }
    .meal-info li{
        width: .23rem;
        height: .23rem;
        border-radius: 50%;
        margin-right: .05rem;
        overflow: hidden;
    }
    .meal-info li img{
        width: 100%;
        height: 100%;
    }
    .meal-num{
        text-align: center;
        width: .48rem;
        height: .18rem;
        line-height: .18rem;
        color: #fe6e6d;
        border: 1px solid #ffa2a2;
        border-radius: .02rem;
        font-size: .12rem;
        margin-top: .13rem;
    }
    .meal-info .price{
        margin-top: .08rem;
    }
    .meal-info .good-price{
        font-size: .09rem;
        font-weight: bold;
        color: red;
    }
    .meal-price{
        font-size: .14rem;

    }
    .good-nuit{
        font-size: .12rem;
        color: #d3d3d3;
    }
    .sign-up{
        width: .9rem;
        height: .35rem;
        line-height: .35rem;
        text-align: center;
        background-color: #ff4154;
        position: absolute;
        bottom: .13rem;
        right: 0rem;
        font-size: .14rem;
        color: white;
        border-radius: .15rem;
    }
</style>